﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>跨浏览器调用高拍仪测试demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<!-- 引入高拍仪JS接口-->
<script src="gpyhs.js"  type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">


    //时间格式化显示
    function formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear(),
            month = date.getMonth() + 1, 
            day = date.getDate(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds();
        var newTime = year + 
                    (month < 10 ? '0' + month : month) + 
                    (day < 10 ? '0' + day : day) + 
                    (hour < 10 ? '0' + hour : hour) + 
                    (min < 10 ? '0' + min : min) + 
                    (sec < 10 ? '0' + sec : sec) ;
        return newTime;
    }


    function sleep(milliSeconds) {
        var startTime = new Date().getTime();
        while (new Date().getTime() < startTime + milliSeconds);
    }

    function ShowInfo(op) {
        var obj = document.getElementById("TextInfo");
        obj.value = obj.value + "\r\n" + op
    }


    /*----------------------------------------------------
    ---（必须重写该函数）返回获取的设备数目及设备名称  ---
    -----------------------------------------------------*/
    function GetDevCountAndNameResultCB(devCount, devNameArr) {

        if (devCount > 0) {

            var obj = document.getElementById("DevName");
            obj.options.length = 0;
            for (var i = 0; i < devCount; i++) {
                var objOption = document.createElement("option");
                objOption.text = devNameArr[i];
                objOption.value = i;
                obj.options.add(objOption);
            }
            obj.selectedIndex = 0;
            var CamID = obj.selectedIndex;

            //获取分辨率
            Cam_GetDevResolution(CamID);  
           
        }
        else {
            ShowInfo("没有发现合适的设备！");
         }
    }

    /*---------------------------------------------------
    ---  （必须重写该函数）返回获取的设备分辨率信息   ---
    ----------------------------------------------------*/
    function GetResolutionResultCB(resCount, resArr) {

        if (resCount > 0) {
            var selectIndex = 0;
            var obj = document.getElementById("DevResolution");
            obj.options.length = 0;
            for (var i = 0; i < resCount; i++) {
                var objOption = document.createElement("option");
                objOption.text = resArr[i];
                objOption.value = i;
                obj.options.add(objOption);
                //默认500万分辨率打开
                if (resArr[i] == "2592*1944") {
                    selectIndex = i;
                 }
            }
            obj.selectedIndex = selectIndex;

            //打开摄像头
            Cam_Close();
            sleep(100);
            var restr = obj[obj.selectedIndex].text;
            var pos = restr.lastIndexOf("*");
            var width = parseInt(restr.substring(0, pos));
            var height = parseInt(restr.substring(pos + 1, restr.length));
            var CamID = document.getElementById("DevName").selectedIndex;
            Cam_Open(CamID, width, height);
        }
        else {
            ShowInfo("获取分辨率信息失败！");
         }
    }


    /*---------------------------------------------------
    ---     （必须重写该函数）返回摄像头开启状态      ---
    ----------------------------------------------------*/
    function GetCameraOnOffStatus(status) {
        if (status == 0) {
            ShowInfo("设备开启成功");
            //Cam_Rotate(1);   // 0-> 0度, 1->90度, 2->180度, 3->270度
        }
        else {
            ShowInfo("设备开启失败!");
         }

    }


//    /*---------------------------------------------------
//    --------     （必须重写该函数）当前拍照状态 ---------
//    ----------------------------------------------------*/
//    function GetCaptrueStatusResultCB(status) {
//        if (status == 0) {
//            ShowInfo("拍照完成");
//        }
//        else {
//            ShowInfo("正在拍摄...");
//        }

//    }


    /*---------------------------------------------------
    --------     （必须重写该函数）拍照结果     ---------
    ----------------------------------------------------*/
    function GetCaptrueImgResultCB( flag, path , base64Str) {
        if (flag == 0) {
            var obj = document.getElementById("CameraPhoto");
            obj.src = "data:;base64," + base64Str;
            if (path == "") {
                ShowInfo("拍照成功");
                //ShowInfo("拍照成功"+flag);
            }
            else {
                ShowInfo("拍照成功，图片保存位置：" + path);
                //ShowInfo("拍照成功，图片保存位置："+flag);
             }
        }
        else {
            ShowInfo("拍照失败!");
            //ShowInfo("拍照失败"+flag);
        }

    }


    /*---------------------------------------------------
    ------  （必须重写该函数）身份证信息返回结果   ------
    ----------------------------------------------------*/
    function GetIdCardInfoResultCB(flag, Name, Sex, Nation, Born, Address, CardNum, IssuedAt, EffectedDate, CardImgPath, CardImgBase64) {
        if (flag == 0) {
            document.getElementById("CardName").value = Name;
            document.getElementById("CardSex").value = Sex;
            document.getElementById("CardNation").value = Nation;
            document.getElementById("CardBorn").value = Born;
            document.getElementById("CardAddress").value = Address;
            document.getElementById("CardNum").value = CardNum;
            document.getElementById("CardIssuedAt").value = IssuedAt;
            document.getElementById("CardEffectDate").value = EffectedDate;
            var obj = document.getElementById("IdCardPhoto");
            obj.src = "data:;base64," + CardImgBase64;
            ShowInfo("读卡成功");
        }
        else {
            ShowInfo("读卡失败!");
        }

    }



    /*-------------------------------------------------------------------
    ------  （必须重写该函数）身份证信息及正反面合并照片返回结果   ------
    --------------------------------------------------------------------*/
    function GetIdCardInfoAndImgResultCB(flag, Name, Sex, Nation, Born, Address, CardNum, IssuedAt, EffectedDate, CardImgPath, CardHeadImgBase64, CardImgBase64) {
        if (flag == 0) {
            document.getElementById("CardName").value = Name;
            document.getElementById("CardSex").value = Sex;
            document.getElementById("CardNation").value = Nation;
            document.getElementById("CardBorn").value = Born;
            document.getElementById("CardAddress").value = Address;
            document.getElementById("CardNum").value = CardNum;
            document.getElementById("CardIssuedAt").value = IssuedAt;
            document.getElementById("CardEffectDate").value = EffectedDate;
            var obj = document.getElementById("IdCardPhoto");
            obj.src = "data:;base64," + CardHeadImgBase64;
            var obj = document.getElementById("CameraPhoto");
            obj.src = "data:;base64," + CardImgBase64;
            ShowInfo("读卡成功");
        }
        else {
            ShowInfo("读卡失败!");
        }

    }


    /*---------------------------------------------------
    ------  （必须重写该函数）条码二维码识别返回结果------
    ----------------------------------------------------*/
    function QrBarCodeRecogResultCB(flag,codeStr) {
        if (flag == 0)
            ShowInfo("条码/二维码 识别结果:" + codeStr);
        else
            ShowInfo("未识别到内容!");
     }



    /*********************
    ***    初始化操作  ***
    **********************/


    function LoadCameraDocument() {

        if (!window.WebSocket) {
            alert("浏览器不支持HTML5,请更新浏览器或者使用其它浏览器");
        }
        var obj = document.getElementById("CameraCtl");
        console.log(obj.offsetWidth);
        Cam_ControlInit(obj,0, 0, obj.offsetWidth, obj.offsetHeight);
    }


    window.onload = function () {
        console.log("window.onload");
    }


    /*********************
    ***    打开摄像头  ***
    **********************/
    function toOpenCamera() {
        var CamID = document.getElementById("DevName").selectedIndex;
        var obj = document.getElementById("DevResolution");
        var restr = obj[obj.selectedIndex].text;
        var pos = restr.lastIndexOf("*");
        var width = parseInt(restr.substring(0, pos));
        var height = parseInt(restr.substring(pos + 1, restr.length));
        Cam_Open(CamID, width, height);
        
    }

    /*********************
    ***    关闭摄像头  ***
    **********************/
    function toCloseCamera() {
        Cam_Close();
    }


    /*********************
    ***    切换摄像头  ***
    **********************/
    function SelectDevice() {
        var CamID = document.getElementById("DevName").selectedIndex;
        //获取分辨率
        Cam_GetDevResolution(CamID);  
     }


     /*********************
     ***    切换分辨率  ***
     **********************/
     function SelectResolution() {
         var obj = document.getElementById("DevResolution");
         var restr = obj[obj.selectedIndex].text;
         var pos = restr.lastIndexOf("*");
         var width = parseInt(restr.substring(0, pos));
         var height = parseInt(restr.substring(pos + 1, restr.length));
         var CamID = document.getElementById("DevName").selectedIndex;
         Cam_Open(CamID, width, height); 
     }


     /*********************
     ***       拍照     ***
     **********************/
    function TakePhoto() {

        var name = formatDate(new Date().getTime());

        var obj = document.getElementById("FileType");
        var path;
        Cam_SetFileType(obj.selectedIndex); //设置文件格式
        if (obj.selectedIndex == 0) {
            path = "D:\\" + name + ".jpg";
         }
        else if (obj.selectedIndex == 1) {
            path = "D:\\" + name + ".png";
        }
        else if (obj.selectedIndex == 2) {
            path = "D:\\" + name + ".tif";
        }
        else if (obj.selectedIndex == 3) {
            path = "D:\\" + name + ".pdf";
        }
        else {
            path = "D:\\" + name + ".jpg";
        }
            
            

        Cam_Photo(path);  //主摄像头拍照
        //Cam_Photo("");  //主摄像头拍照
       
    }


    function SetCameraCutMode() {
        var obj = document.getElementById("customselectcqmsid");
        var restr = obj[obj.selectedIndex].text;
        console.log(restr);
        if (restr === '不裁切') {
            Cam_SetCutMode(0);
        }
        if (restr === '手动裁切') {
            Cam_SetCutMode(2);
        }
        if (restr === '自动裁切') {
            Cam_SetCutMode(1);
        }
        if (restr === '自定义') {
            Cam_SetCutMode(3);
            //设置裁剪区域
            SetCustomArea(3000,3000,9000,9000);
        }
    }


    /*********************
    ***    读取身份证  ***
    **********************/
    function GetIdCardInfo() {
        var path = "D:\\IdCard.jpg";
        //Cam_ReadIdCard(path);
        //Cam_ReadIdCard("");
        Cam_ReadIdCardEx(path);
    }


    /*********************
    ***    设置文件格式  ***
    **********************/
    function toSetFileType() {
        var obj = document.getElementById("FileType");
        Cam_SetFileType(obj.selectedIndex);
    }


    /*********************
    ***    设置色彩模式  ***
    **********************/
    function toSetColorModel() {
        var obj = document.getElementById("ColorMode");
        Cam_SetColorMode(obj.selectedIndex);
    }


    /*********************
    ***    设置JPG图像质量  ***
    **********************/
    function toSetJpgQuality() {
        var obj = document.getElementById("JpgQuality");
        var val = obj[obj.selectedIndex].text;
        Cam_SetJpgQuality(val);
    }


     /*********************
     ***    设置去黑边  ***
     **********************/
     function toSetDeleteBlackEdge() {
         var obj = document.getElementById("Checkbox1");
         if (obj.checked) {
             Cam_SetDeleteBlackEdge(1);
         }
         else {
             Cam_SetDeleteBlackEdge(0);
         }
     }

     /*********************
     ***    设置去底色  ***
     **********************/
     function toSetDeleteBgColor() {
         var obj = document.getElementById("Checkbox2");
         if (obj.checked) {
             Cam_SetDeleteBgColor(1);
         }
         else {
             Cam_SetDeleteBgColor(0);
         }
     }


    /*---------------------------------------------------
    --------     （必须重写该函数）上传结果     ---------
    ----------------------------------------------------*/
    function HttpResultCB(flag, ResultStr) {
        if (flag == 0) {
            alert("上传成功 :" + ResultStr);
        }
        else {
            alert("上传失败！");
        }
    }


    /*********************
    ******    上传  ******
    **********************/
    function HttpUploadFile() {

        var filePath = "D:\\2130.jpg";
        //var url = "http://112.27.213.220:2201/interface/FileUploadCode.jsp";

        //var url = "http://localhost:9005/MyServletTest/upload";
        var url = "https://kimi.moonshot.cn/";
        //var url = "http://localhost:9005/MyServletTest/upload";
        UploadFile(url, filePath);
     
    }


    //从摄像头中识别二维码
    function RecogQrCodeFromCamera(type){
        Cam_RecogQrBarCodeFromCamera(type)
    }

    //从图片文件中识别二维码
    function RecogBarCodeFromFile(type) {
        var imgpath = "D:\\123.jpg";
        Cam_RecogQrBarCodeFromFile(type, imgpath)
    }




    //添加要合并的PDF文件
    function ToAddPDFFile() {
        //Cam_AddImgFileToPDF("");
       var path1 = "D:\\1.jpg";
       var path2 = "D:\\2.jpg";
       var path3 = "D:\\3.jpg";
       var path4 = "D:\\4.jpg";
       var path5 = "D:\\5.jpg";
       var path6 = "D:\\6.jpg";
       //var path7 = "D:\\7.jpg";
       var allpath = path1 + ";" + path2 + ";" + path3 + ";" + path4 + ";" + path5 + ";" + path6 ;
       Cam_AddImgFileToPDF(allpath);
        sleep(100);
    }
    
    /*---------------------------------------------------
    --------     添加合并的PDF文件返回结果     ---------
    ----------------------------------------------------*/
    function AddImgFileToPDFResultCB(flag, base64Str)
    {
        if (flag == 0) {
            ShowInfo("添加合并的PDF文件成功");
            var obj = document.getElementById("CameraPhoto");
            obj.src = "data:;base64," + base64Str;
        }
        else {
            ShowInfo("添加合并的PDF文件失败!");
         }
    }


    //PDF合并测试
    function ToCombinePDF() {
        Cam_CombinePDF("D:\\test.pdf");
        //Cam_CombinePDF("");  
        //Cam_CombinePDF("D:\\QRjoNxNcgw.pdf");      
    }

    /*---------------------------------------------------
    --------     （必须重写该函数）合并PDF结果     ---------
    ----------------------------------------------------*/
    function PdfCombineResultCB(flag, PdfBase64Str) {
        if (flag == 0) {
            ShowInfo("合并PDF完成");
            console.log(PdfBase64Str);
        }
        else {
            ShowInfo("合并PDF失败!");
        }
    }


    //添加要合并的图像文件
    function ToAddMergeImageFile() {
        Cam_AddMergeImageFile("");
        sleep(100);
    }

    /*---------------------------------------------------
    --------     添加合并图像文件返回结果     ---------
    ----------------------------------------------------*/
    function AddMergeImageFileResultCB(flag, base64Str) {
        if (flag == 0) {
            ShowInfo("添加合并图像文件成功");
            var obj = document.getElementById("CameraPhoto");
            obj.src = "data:;base64," + base64Str;
        }
        else {
            ShowInfo("添加合并图像文件失败!");
        }
    }


    //图像合并测试
    function ToMergeImages() {
        Cam_MergeImages("D:\\merge.jpg",0);     
    }

    /*---------------------------------------------------
    --------     （必须重写该函数）图像合并结果     ---------
    ----------------------------------------------------*/
    function MergeImagesResultCB(flag, base64Str) {
        if (flag == 0) {
            ShowInfo("图像合并完成");
            var obj = document.getElementById("CameraPhoto");
            obj.src = "data:;base64," + base64Str;
        }
        else {
            ShowInfo("图像合并失败!");
        }
    }




    /*---------------------------------------------------
    -------（必须重写该函数）获取驱动盘符返回结果--------
    ----------------------------------------------------*/
    function GetDriveResultCB(driveStr) {
        if (driveStr == "") {
            ShowInfo("获取盘符失败!");
        }
        else {
            ShowInfo(driveStr);
         }
     }


     //设置水印
     function toSetWaterMarkParams() {
         var isAddMark;
         var isAddTime;
         var wTransp;
         var wPos;
         var wSize;
         var wColor;
         var szInfo;
         var obj = document.getElementById("Checkbox3");
         if (obj.checked)
             isAddMark = 1;
         else
             isAddMark = 0;
         obj = document.getElementById("Checkbox4");
         if (obj.checked)
             isAddTime = 1;
         else
             isAddTime = 0;
         szInfo = document.getElementById("Text1").value;   //水印内容
         wTransp = parseInt(document.getElementById("Text2").value); //透明度
         wSize = parseInt(document.getElementById("Text3").value);   //水印大小
         wPos = document.getElementById("Select1").selectedIndex;   //水印位置
         wColor = document.getElementById("Select2").selectedIndex;   //水印颜色
         SetWaterMark(isAddMark, 0, isAddTime, wTransp, wPos, wSize, wColor, szInfo);  //生效水印设置
      }



      //删除文件
      function ToDeleteFile() {
          var path = "D:\\log.txt";
          DeleteFile(path);
       }

       //删除文件返回结果
       function GetDeleteFileResultCB(flag) {
           if (flag == 0) {
               ShowInfo("删除文件成功");
           }
           else {
               ShowInfo("删除文件失败！");
            }
       }



       /*----------------------------------------------------------------
       -------（必须重写该函数）添加需要OCR识别的图片文件返回结果--------
       --------------------------------------------------------------*/
       function AddOcrRecogFileResultCB(flag, base64Str) {
           if (flag == 0) {
               ShowInfo("添加需要OCR识别的图片文件成功");
               var obj = document.getElementById("CameraPhoto");
               obj.src = "data:;base64," + base64Str;
           }
           else {
               ShowInfo("添加文件失败!");
           }
       }

       //添加文件
       function ToAddOcrRecogFile() {

           //AddOcrRecogFile("");  //传空拍照添加，也可以传文件路径    

           var path1 = "D:\\1.jpg";
           var path2 = "D:\\2.jpg";
           var path3 = "D:\\3.jpg";
           var path4 = "D:\\4.jpg";
           var path5 = "D:\\5.jpg";
           var path6 = "D:\\6.jpg";
           //var path7 = "D:\\7.jpg";
           var allpath = path1 + ";" + path2 + ";" + path3 + ";" + path4 + ";" + path5 + ";" + path6 ;
           console.log(allpath);
           AddOcrRecogFile(allpath);
       }


       /*---------------------------------------------------
       -------（必须重写该函数）OCR识别结果返回--------
       ----------------------------------------------------*/
       function OcrCallResultCB(flag,proValue, ResultStr, base64Str) {
           if (flag == 0) {
               ShowInfo("Ocr文字识别成功：" + ResultStr);
               //ShowInfo("base64data：" + base64Str);
               var obj = document.getElementById("mypdf");
               obj.src = "data:application/pdf;base64," + base64Str;
           }
           else if (flag == 1) {
               ShowInfo("Ocr文字识别进度：" + proValue);  
            }
           else {
               if (flag == 40)
                   ShowInfo("Ocr授权失败！");
               else
                   ShowInfo("Ocr文字识别失败！");
           }
       }


       //OCR识别(多张合并识别)
       function ToOcrCallProEx() {

           OcrCallProEx(0, "D:\\out.pdf",0);

       }

        //OCR测试(单张识别)
        function OcrTest() {
            OcrCallPro(0, "D:\\test.jpg", "D:\\test.txt");
        }


        //********************展平***************************
        var leftPath;
        var rightPath;
        var Number = 0;

        //回调是否成功
        function GetZhanpingResultCB(flag) {

            if (flag == 0x03) {
                if (flag == 0x02) {
                    var obj = document.getElementById("CameraPhoto");
                    obj.src = leftPath;
                    ShowInfo("拍照成功");
                }
                else {

//                    var obj = document.getElementById("CameraPhoto");
//                    obj.src = leftPath;
                    var obj = document.getElementById("CameraPhoto");
                    obj.src = leftPath;

                    if (document.getElementById("Radio11").checked) {
                        var obj = document.getElementById("CameraPhoto2");
                        obj.src = rightPath;
                     }
                    ShowInfo("展平成功");
                 }
               
            } 
            else
                ShowInfo("展平失败！");
         }

         //展平设置
        function SetZhanpingParams() {

            if (document.getElementById("Radio9").checked) {
                SetZpMode(0)
            }
            if (document.getElementById("Radio10").checked) {
                SetZpMode(1)
            }
            if (document.getElementById("Radio11").checked) {
                SetZpMode(2)
            }
        }

        //展品拍照
        function TakeZpPhoto() {
            if (document.getElementById("Radio9").checked) {
                TakePhoto()
            }
            else {
                Number++;
                leftPath = "d:\\left" + Number + ".jpg";
                rightPath = "d:\\right" + Number + ".jpg";
                CaptureZpPhoto(leftPath, rightPath);
            }
            
        }





        function CameraPhoto2_onclick() {

        }

     function createFormHtml (arr) {
            // 购买方信息
         // 表单数据
         let formItems = [
             { title: "发票号码：", value: "25412000000279853119" },
             { title: "开票日期：", value: " 2025 年 05 月 15 日" },
             { title: "购买方信息", type: 'sub-title'},
             { title: "名称：", value: "佛山市中尔软件有限公司" },
             { title: "统一社会信用代码 / 纳税人识别号：", value: "91440604594067201B" },
             { title: "销售方信息", type: 'sub-title'},
             { title: "单价：", value: "127.358409566038" },
             { title: "金额：", value: "127.36" },
             { title: "税额：", value: "7.64" },
             { title: "统一社会信用代码 / 纳税人识别号：", value: "914406001935554313" },
             { title: "项目名称：", value: "餐饮服务餐费" },
             { title: "规格型号：", value: "（空）" },
             { title: "单位：", value: "项" },
             { title: "数量：", value: "1" },
             { title: "合 计：", value: "¥127.36 （金额），¥7.64（税额）" },
             { title: "价税合计（大写）：", value: "㊣壹佰叁拾伍圆整" +"（小写）: ¥135.00" },
             { title: "备注：", value: "（空）" },
             { title: "税务监制章：", value: "国家税务总局广东省税务局" },
         ];
         if (arr) formItems = arr

         // 获取容器元素
         const container = document.querySelector('.form-container');

         // 循环生成表单项目
         formItems.forEach(item => {
             if (item.type === 'sub-title') {
                 const formItem = document.createElement('div');
                 formItem.className = 'form-item';
                 // 设置标题
                 const titleDiv = document.createElement('div');
                 titleDiv.className = 'form-item-title sub-title';
                 titleDiv.textContent = item.title;
                 // 添加到表单项目
                 formItem.appendChild(titleDiv);
                 // 添加到容器
                 container.appendChild(formItem);
             } else  {
                 const formItem = document.createElement('div');
                 formItem.className = 'form-item';

                 // 设置标题
                 const titleDiv = document.createElement('div');
                 titleDiv.className = 'form-item-title';
                 titleDiv.textContent = item.title;

                 // 设置输入框
                 const inputDiv = document.createElement('div');
                 inputDiv.className = 'form-item-input';

                 const input = document.createElement('input');
                 input.value = item.value;

                 // 添加焦点事件处理
                 input.addEventListener('focus', function() {
                     formItem.classList.add('form-item-focused');
                 });
                 // 添加失焦事件处理
                 input.addEventListener('blur', function() {
                     formItem.classList.remove('form-item-focused');
                 });

                 inputDiv.appendChild(input);

                 // 添加到表单项目
                 formItem.appendChild(titleDiv);
                 formItem.appendChild(inputDiv);

                 // 添加到容器
                 container.appendChild(formItem);
             }

         });
     }
     function toolsFn () {
         // 工具切换
         const toolButtons = document.querySelectorAll('.tool-btn');
         toolButtons.forEach(btn => {
             btn.addEventListener('click', () => {
                 // 取消所有工具激活状态
                 toolButtons.forEach(b => b.classList.remove('active'));
                 btn.classList.add('active'); // 激活当前工具
                 // 根据工具类型执行不同逻辑（示例：改变光标）
                 switch (btn.id) {
                     case 'handTool':
                         document.body.style.cursor = 'grab';
                         break;
                     case 'cropTool':
                         document.body.style.cursor = 'crosshair';
                         break;
                     case 'selectTool':
                         document.body.style.cursor = 'default';
                         break;
                 }
             });
         });

         //  // 全屏功能
         // document.getElementById('fullScreen').addEventListener('click', () => {
         //     if (document.fullscreenElement) {
         //         document.exitFullscreen();
         //     } else {
         //         document.documentElement.requestFullscreen();
         //     }
         // });
     }
     function selectSet (className, deviceList) {
         // 示例：动态添加选项
         const select = document.querySelector('.' + className);
         // 示例：动态添加选项
         deviceList.forEach(device => {
             const option = document.createElement('option');
             option.value = device.id
             option.textContent = device.label;
             select.appendChild(option);
         });
     }
    // 监听dom 渲染完成
    document.addEventListener('DOMContentLoaded', () => {
        createFormHtml()
        toolsFn()
        selectSet('custom-select-cqms', [
            {
                label: '不裁切',
                id: 'v1'
            },
            {
                label: '手动裁切',
                id: 'v2'
            },
            {
                label: '自动裁切',
                id: 'v3'
            },
            {
                label: '自定义',
                id: 'v4'
            }
        ])
        selectSet('custom-select-tpzl', Array.from(new Array(10)).map((x, i) => {
            return {
                id: i,
                label: (i + 1) * 10
            }
        }))
        const dropdownBtn = document.getElementById('dropdownBtn');
        const dropdownBtnBox = document.getElementById('dropdownBtnBox');
        const dropdownContent = document.getElementById('dropdownContent');

        const dropdownBtn2 = document.getElementById('dropdownBtn2');
        const dropdownBtnBox2 = document.getElementById('dropdownBtnBox2');
        const dropdownContent2 = document.getElementById('dropdownContent2');

        const options = document.querySelectorAll('.option');
        const options2 = document.querySelectorAll('.option2');

        // 切换下拉菜单显示
        dropdownBtnBox.addEventListener('click', () => {
            console.log('888888')
            dropdownContent.classList.toggle('show');
            dropdownContent2.classList.remove('show');
        });
        dropdownBtnBox2.addEventListener('click', () => {
            dropdownContent2.classList.toggle('show');
            dropdownContent.classList.remove('show');
        });

        // 选项点击处理
        options.forEach(option => {
            option.addEventListener('click', () => {
                // 清除所有选项的选中状态
                options.forEach(opt => {
                    opt.removeAttribute('data-selected');
                    const checkmark = opt.querySelector('.checkmark');
                    if (checkmark) checkmark.remove();
                });

                // 设置当前选项为选中
                option.setAttribute('data-selected', 'true');
                const checkmark = document.createElement('span');
                checkmark.classList.add('checkmark');
                checkmark.textContent = '✔';
                option.appendChild(checkmark);

                // 更新按钮文本
                dropdownBtn.textContent = option.dataset.value;

                // 隐藏下拉菜单
                dropdownContent.classList.remove('show');
            });
        });
        options2.forEach(option => {
            option.addEventListener('click', () => {
                // 清除所有选项的选中状态
                options2.forEach(opt => {
                    opt.removeAttribute('data-selected');
                    const checkmark = opt.querySelector('.checkmark');
                    if (checkmark) checkmark.remove();
                });

                // 设置当前选项为选中
                option.setAttribute('data-selected', 'true');
                const checkmark = document.createElement('span');
                checkmark.classList.add('checkmark');
                checkmark.textContent = '✔';
                option.appendChild(checkmark);

                // 更新按钮文本
                dropdownBtn2.textContent = option.dataset.value;

                // 隐藏下拉菜单
                dropdownContent2.classList.remove('show');
            });
        });

        // 点击外部隐藏下拉菜单
        window.addEventListener('click', (e) => {
            if (!e.target.closest('.dropdown')) {
                dropdownContent.classList.remove('show');
                dropdownContent2.classList.remove('show');
            }
        });
    });

</script>

<body onload="LoadCameraDocument()">
        <div class="header-box">
            <h1>高拍仪+AI辅助录入功能</h1>
        </div>
        <div class="main-box">
            <div class="left-box">
                <div class="box">
                    <div class="item-box" style="padding-right: 20px">
                        <div class="text-title">
                            拍照图片
                        </div>
                        <img id="CameraPhoto"  src="" style="width: 100%;height: 198px;"  />
                        <!--                    <img id="CameraPhoto2"  src="" style="width: 198px;height: 198px;" />-->
                    </div>
                    <div class="item-box">
                        <div class="text-title">
                            电子发票（普通发票）
                        </div>
                        <div class="form-box form-container">
<!--                            <div class="form-item">-->
<!--                                <div class="form-item-title">-->
<!--                                    单据编号-->
<!--                                </div>-->
<!--                                <div class="form-item-input">-->
<!--                                    <input value="00001215">-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
                <div class="btn">确认</div>
            </div>
            <div class="right-box">
                <div class="toolbar">
                    <div style="display: flex;align-items: center;gap: 17px;margin-left: 10px;margin-right: 10px">
                        <img title="放大" onclick="Cam_ZoomIn();" src="img/sx.png" alt="sx"/>
                        <img title="缩小" onclick="Cam_ZoomOut();" src="img/fd.png" alt="sx"/>
                        <img title="拍照" src="img/pz.png" onclick = "TakePhoto();" alt="pz"/>
                        <img title="左旋" src="img/zz.png" onclick = "Cam_RotateLeft();" alt="zz"/>
                        <img title="右旋" src="img/yz.png" onclick = "Cam_RotateRight();" alt="yz"/>
                        <img style="width: 24px" title="1:1" src="img/1-1.png" onclick = "Cam_TrueSize();" alt="1-1"/>
                        <img style="width: 24px" title="适屏" src="img/sp.png" onclick = "Cam_BestSize();" alt="sp"/>
<!--                        <img title="测试" src="img/test.png" onclick = "OcrTest();" alt="test"/>-->
                    </div>
                </div>
                <div id='CameraCtl' style="width:90%; height: 500px"> </div>
                <div style="display: none">
<!--                    设备-->
<!--                    <select style="width:140px" onchange="SelectDevice()"></select>-->
<!--                    分辨率-->
<!--                    <select style="width:140px" id="DevResolution" onchange = "SelectResolution()"></select>-->
                    <input type = "button" value = " 打开设备 " onclick = "toOpenCamera();"/>
                    <input type = "button" value = " 关闭设备 " onclick = "toCloseCamera();"/>
                    <br />

                    裁切模式:
                    <input id="Radio1"  name="R1" type="radio" value="V1" onclick="SetCameraCutMode()" checked="checked"/>不裁切
                    <input id="Radio2"  name="R1" type="radio" value="V2" onclick="SetCameraCutMode()"/>手动裁切
                    <input id="Radio3"  name="R1" type="radio" value="V3" onclick="SetCameraCutMode()"/>自动裁切
                    <input id="Radio4"  name="R1" type="radio" value="V4" onclick="SetCameraCutMode()"/>自定义
                    <br />

                    文件格式:
                    <select id="FileType" onchange = "toSetFileType()">
                        <option value="0">jpg</option>
                        <option value="1">png</option>
                        <option value="2">tif</option>
                        <option value="3">pdf</option>
                    </select>

                    色彩模式:
                    <select   id="ColorMode" onchange = "toSetColorModel()">
                        <option value="0">彩色</option>
                        <option value="1">灰度</option>
                        <option value="2">黑白</option>
                    </select>

                    图像质量:
<!--                    <select   id="JpgQuality" onchange = "toSetJpgQuality()">-->
<!--                        <option value="0">10</option>-->
<!--                        <option value="1">20</option>-->
<!--                        <option value="2">30</option>-->
<!--                        <option value="3">40</option>-->
<!--                        <option value="4">50</option>-->
<!--                        <option value="5" selected="true">60</option>-->
<!--                        <option value="6">70</option>-->
<!--                        <option value="7">80</option>-->
<!--                        <option value="8">90</option>-->
<!--                        <option value="9">100</option>-->
<!--                    </select>-->

                    <input id="Checkbox1" type="checkbox" onclick = "toSetDeleteBlackEdge()"/> 去黑边
                    <input id="Checkbox2" type="checkbox" onclick = "toSetDeleteBgColor()"/> 去底色

                </div>
<!--                <br />-->

                <div style="display: none">
                    <input id="Checkbox3" type="checkbox" /> 添加水印
                    水印内容<input id="Text1" type="text" value="水印测试" />
                    透明度<input id="Text2" type="text" value="127" style="width:40px" />
                    大小<input id="Text3" type="text" value="80" style="width:40px"/>  <br />
                    位置
                    <select   id="Select1">
                        <option value="0">左上</option>
                        <option value="1">右上</option>
                        <option value="2">左下</option>
                        <option value="3">右下</option>
                        <option value="4">中间</option>
                    </select>
                    颜色
                    <select   id="Select2" >
                        <option value="0">红色</option>
                        <option value="1">绿色</option>
                        <option value="2">蓝色</option>
                        <option value="3">青色</option>
                        <option value="4">黄色</option>
                        <option value="5">白色</option>
                        <option value="6">黑色</option>
                    </select>
                    <input id="Checkbox4" type="checkbox" /> 添加时间水印
                    <input type = "button" value = "生效水印参数设置" onclick = "toSetWaterMarkParams()"/>
                </div>

<!--                <br />-->

                <div style="display: none">
                    <input type = "button" value = "获取盘符" onclick = "GetDrives();" />
                    <input type = "button" value = "放大" onclick = "Cam_ZoomIn();" />
                    <input type = "button" value = "缩小" onclick = "Cam_ZoomOut();" />
                    <input type = "button" value = "适屏" onclick = "Cam_BestSize();" />
                    <input type = "button" value = "1:1" onclick = "Cam_TrueSize();" />
                    <input type = "button" value = "左旋" onclick = "Cam_RotateLeft();" />
                    <input type = "button" value = "右旋" onclick = "Cam_RotateRight();" />
                    <input type = "button" value = "拍照" onclick = "TakePhoto();" />
                    <input type = "button" value = "对焦" onclick = "Cam_Focus();" />
                    <input type = "button" value = "设置" onclick = "Cam_ShowVideoProp();" />
                    <input type = "button" value = "上传" onclick = "HttpUploadFile();" />
                    <input type = "button" value = "读身份证" onclick = "GetIdCardInfo();" />
                    <input type = "button" value = "从摄像头中识别二维码" onclick = "RecogQrCodeFromCamera(1);" />
                    <input type = "button" value = "从图片中识别二维码" onclick = "RecogBarCodeFromFile(1);" />
                    <input type = "button" value = "添加合并PDF文件" onclick = "ToAddPDFFile();" />
                    <input type = "button" value = "合并PDF" onclick = "ToCombinePDF();" />
                    <input type = "button" value = "添加合并图像文件" onclick = "ToAddMergeImageFile();" />
                    <input type = "button" value = "合并图像" onclick = "ToMergeImages();" />
                    <input type = "button" value = "删除文件" onclick = "ToDeleteFile();" />
                    <input type = "button" value = "ocr测试" onclick = "OcrTest();" />
                </div>
<!--                工具二-->
                <div class="toolbar2">
                    <div class="sub-toolbar2-box">
                        <div class="device-selector">
                            <label class="label-text">设备</label>
                            <select id="DevName" class="custom-select custom-select-common" onchange="SelectDevice()">
                                <!-- 可添加更多选项 -->
                            </select>
                        </div>
                        <div class="device-selector">
                            <label class="label-text">分辨率</label>
                            <select id="DevResolution" class="custom-select-fbl custom-select-common" onchange="SelectResolution()">
                                <!-- 可添加更多选项 -->
                            </select>
                        </div>
                        <div class="device-selector">
                            <label class="label-text">裁切模式</label>
                            <select id="customselectcqmsid" class="custom-select-cqms custom-select-common" onchange="SetCameraCutMode()">
                                <!-- 可添加更多选项 -->
                            </select>
                        </div>
                        <div class="device-selector">
                            <label class="label-text">图像质量</label>
                            <select id="JpgQuality" class="custom-select-tpzl custom-select-common" onchange="toSetJpgQuality()">
                                <!-- 可添加更多选项 -->
                            </select>
                        </div>
                    </div>
                </div>

                <div class="out-info-box">
                    <textarea  style="width:100%; height:100%" id="TextInfo" cols="20" rows="4"></textarea>
                    <div class="dropdown">
                        <div>
                            <div class="btn-box" id="dropdownBtnBox">
                                <button class="dropdown-btn" id="dropdownBtn">
                                    DeepSeek
                                </button>
                                <img src="./img/dot.png" id="dot" />
                            </div>
                            <div class="dropdown-content" id="dropdownContent">
                                <div class="option" data-value="DeepSeek" data-selected="true">
                                    <div class="ttbox">
                                        <div class="tt-title">DeepSeek</div>
                                        <div>适合深度思考</div>
                                    </div>
                                    <span class="checkmark">✔</span>
                                </div>
                                <div class="option" data-value="DouBao">
                                    <div class="ttbox">
                                        <div class="tt-title">豆包</div>
                                        <div>全能处理，深度思考</div>
                                    </div>
                                </div>
                                <div class="option" data-value="TongYi">
                                    <div class="ttbox">
                                        <div class="tt-title">通义</div>
                                        <div>适合深度思考</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="position: relative">
                            <div class="btn-box" id="dropdownBtnBox2">
                                <button class="dropdown-btn" id="dropdownBtn2">
                                    工方票信息提取
                                </button>
                                <img src="./img/dot.png" />
                            </div>
                            <div class="dropdown-content" id="dropdownContent2">
                                <div class="option2" data-value="土方单信息提取" data-selected="true">
                                    <div class="ttbox">
                                        <div class="tt-title">土方单信息提取</div>
                                    </div>
                                    <span class="checkmark">✔</span>
                                </div>
                                <div class="option2" data-value="身份证提取">
                                    <div class="ttbox">
                                        <div class="tt-title">身份证提取</div>
                                    </div>
                                </div>
                                <div class="option2" data-value="营业执照信息提取">
                                    <div class="ttbox">
                                        <div class="tt-title">营业执照信息提取</div>
                                    </div>
                                </div>
                                <div class="option2" data-value="驾驶证信息提取">
                                    <div class="ttbox">
                                        <div class="tt-title">驾驶证信息提取</div>
                                    </div>
                                </div>
                                <div class="option2" data-value="司机资格证信息提取">
                                    <div class="ttbox">
                                        <div class="tt-title">司机资格证信息提取</div>
                                    </div>
                                </div>
                                <div class="option2" data-value="车辆行驶证信息提取">
                                    <div class="ttbox">
                                        <div class="tt-title">车辆行驶证信息提取</div>
                                    </div>
                                </div>
                                <div class="option2" data-value="车辆营运证信息提取">
                                    <div class="ttbox">
                                        <div class="tt-title">车辆营运证信息提取</div>
                                    </div>
                                </div>
                                <div class="option2" data-value="垃圾处理证信息提取">
                                    <div class="ttbox">
                                        <div class="tt-title">垃圾处理证信息提取</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
</body>
<style>
    option {
        line-height: 36px !important;
        display: block !important;
        padding: 10px 0 !important;
    }
    body {
        margin: 0;
        overflow: hidden;
    }
    .header-box {
        background: #57ce76;
        padding: 0 20px;
    }
    h1 {
        font-size: 20px;
        color: #fff;
        line-height: 60px;
        margin: 0;
    }
    .main-box {
        color: #262626;
        /*color: #394c3e;*/
        display: grid;
        /*grid-template-columns: 480px calc(100% - 480px);*/
        position: absolute;
        width: 100%;
        left: 0;
        top: 60px;
        height: calc(100% - 60px);
    }
    .text-title {
        font-size: 16px;
        padding: 14px 0;
    }
    .right-box {
        background: #fff;
        position: absolute;
        right: 0;
        top: 0;
        width: calc(100% - 480px);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .left-box, .out-info-box, .toolbar {
        background: #f4f4f4;
    }
    .left-box {
        position: absolute;
        left: 0;
        width: 480px;
        top: 0;
        height: 100%;
    }
    .out-info-box {
        position: absolute;
        bottom: 20px;
        width: calc(100% - 70px);
        height: 80px;
        left: 20px;
        border-radius: 10px;
        padding: 0 12px 56px 12px;
    }
    .toolbar2 {
        position: absolute;
        bottom: 170px;
        left: 20px;
    }
    textarea {
        border: none;
        color: #4b6351;
        outline: none;
        resize: none;
        background: none;
        margin: 0;
        box-shadow: none;
    }
    .box {
        padding: 0 0 0 20px;
    }
    img {
        display: block;
    }
    .item-box {
        margin: 14px 0 0 0;
    }
    .item-box:first-child {
        margin-top: 0;
    }

    .dropdown {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 12px;
        left: 20px;
        bottom: 10px;
    }
    .btn-box {
        display: flex;
        align-items: center;
        border-radius: 100px;
        background: rgb(87 206 118 / 16%);
        color: #effff1;
        cursor: pointer;
        padding: 8px 16px;
    }
    .btn-box img {
        width: 16px;
    }
    .dropdown-btn {
        border: none;
        background: none;
        font-weight: bold;
        color: #168533;
        cursor: pointer;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #fff;
        min-width: 160px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
        bottom: 40px;
        left: -12px;
        font-size: 14px;
        border-radius: 10px;
        padding: 12px 12px;
    }
    .form-box.form-container {
        padding-right: 10px;
    }
    .dropdown-content2 {
        left: 100px;
    }
    .option {
        padding: 8px 16px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;

    }
    .option:hover {
        background-color: #d3edd7;
    }
    .option2 {
        padding: 8px 16px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        font-weight: normal;
    }
    .option2 .tt-title {
        font-weight: normal;
        padding-bottom: 0;
    }
    .option2:hover {
        background-color: #d3edd7;
    }
    .checkmark {
        margin-left: 8px;
    }
    .show {
        display: block;
    }
    .ttbox {
        font-size: 12px;
    }
    .tt-title {
        font-weight: bold;
        padding: 0 0 6px 0;
        font-size: 14px;
    }
    /* 通用输入框样式重置 */
    input {
        color: #394c3e;
        /* 去除默认边框 */
        border: none;
        /* 去除默认内边距（可根据需求调整） */
        /* 去除选中时的轮廓 */
        outline: none;
        /* 透明背景（可选） */
        background-color: transparent;
        /* 自定义字体（可选） */
        font-family: 'Microsoft YaHei', sans-serif;
        /* 自定义边框（如需要替代默认样式） */
        /*border: 1px solid #e0e0e0; !* 浅灰色边框 *!*/
        border-radius: 4px; /* 圆角 */
        /* 鼠标悬停效果（可选） */
        transition: border-color 0.3s ease;
        /* 关键：清除聚焦时默认外轮廓 */
        outline: none;
        text-align: right;
        line-height: 40px;
        width: 100%;
    }
    .form-item-input {
        padding: 0 20px 0 20px;
        width: calc(100% - 100px);
    }
    .form-item-focused .form-item-input {
        /*background: #57ce76;*/
        border-radius: 100px;
        /*color: #fff;*/
    }
    .form-item-focused .form-item-input input {
        /*color: #fff;*/
    }

    /* 选中时的替代视觉反馈（用 box-shadow 替代 outline） */
    input:focus {
        border-color: #4a90e2; /* 蓝色边框 */
    }
    input::-webkit-input-placeholder { /* 占位符样式 */
        color: #999;
    }
    input::-webkit-search-cancel-button { /* 搜索框的清除按钮 */
        -webkit-appearance: none;
    }
    .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0;
        border-radius: 0 100px 100px 0;
        font-size: 12px;
        line-height: 40px;
    }
    .form-item:hover {
        background-color: #c7edcc;
    }
    .form-item.form-item-focused {
        background: #c7edcc;
    }
    .form-item-title {
        padding: 0 0 0 20px;
        width: 338px;
        line-height: 20px;
        white-space: nowrap;
    }
    .form-item-title.sub-title {
        font-size: 14px;
        padding: 10px 20px;
        color: #57ce76;
    }

    .toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        margin: 20px 0 30px 0;
        border-radius: 100px;
    }
    .toolbar img {
        width: 26px;
        cursor: pointer;
    }
    .hualun {
        display: flex;
        align-items: center;
    }
    .toolbar .hualun img {
        width: 16px;
    }
    .tool-btn {
        padding: 6px 12px;
        border: none;
        background: #91c598;
        cursor: pointer;
        width: max-content;
    }
    .btn {
        background: #57ce76;
        color: #fff;
        text-align: center;
        margin: 0 20px;
        border-radius: 100px;
        line-height: 42px;
        margin-top: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: #e0f0e0; /* 浅绿色轨道 */
    }

    ::-webkit-scrollbar-thumb {
        background-color: #b0d0b0; /* 浅绿滑块 */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #90c090; /* 深绿 hover 效果 */
    }
    .form-box {
        height: 478px;
        overflow-y: auto;
    }
    /* 滚动条整体 */
    ::-webkit-scrollbar {
        width: 8px; /* 滚动条宽度 */
        height: 8px; /* 水平滚动条高度（若存在） */
    }

    /* 滚动条轨道（背景） */
    ::-webkit-scrollbar-track {
        background-color: #f4f4f4; /* 轨道颜色 */
        border-radius: 4px; /* 轨道圆角 */
    }

    /* 滚动条滑块（可拖动部分） */
    ::-webkit-scrollbar-thumb {
        background-color: hsl(87deg 13.04% 90.98%); /* 滑块颜色 */
        border-radius: 4px; /* 滑块圆角 */
    }

    /* 滑块 hover 效果 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #5a5a5a; /* hover 时滑块颜色 */
    }
    .toolbar2 {
        width: 100%;
        text-align: left;
    }
    .sub-toolbar2-box {
        padding: 0 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: center;
    }

    .device-selector {
        display: flex;
        align-items: center;
        gap: 8px; /* 标签与下拉框间距 */
    }

    .label-text {
        font-size: 14px; /* 调整字体大小 */
        color: #818181; /* 文字颜色 */
    }
    .custom-select-common {
        padding: 6px 26px 6px 12px;
        width: 136px;
        border: 1px solid #e0e0e0; /* 边框 */
        border-radius: 4px; /* 圆角 */
        background-color: white;
        font-size: 14px;
        appearance: none; /* 隐藏默认下拉箭头 */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M6 8L0 2 1 1 6 6 11 1 12 2z" fill="%23999"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center; /* 箭头位置 */
        background-size: 12px; /* 箭头大小 */
    }


    .custom-select-common:focus {
        outline: none;
        border-color: #999; /* 聚焦时边框颜色 */
    }
</style>

</html>
